<template>
  <div class="shoukuanpeizhi">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <el-page-header style="margin: 20px 0 20px 10px;" @back="goBack" content="投诉与反馈/查看"></el-page-header>
        <div class="zhiboxitong_right">
          <div class="flexc t_bottom">
            <div class="flexc">
              <div class="t_title">投诉来源</div>
              <div class="t_con" style="width: 500px;margin-left:30px">
                <!-- <span v-if="this.$route.query.type=='tt'">抖音小程序</span>
                <span v-else>微信小程序</span> -->
                {{tsobj.complain_source}}
              </div>
            </div>
            <div class="flexc">
              <div class="t_title">投诉手机号</div>
              <div class="t_con" style="margin-left:30px">{{ tsobj.mobile }}</div>
            </div>
          </div>
          <div class="flexc t_bottom">
            <div class="flexc">
              <div class="t_title">创建时间</div>
              <div class="t_con" style="width: 500px;margin-left:30px">{{ tsobj.created_at }}</div>
            </div>
            <div class="flexc">
              <div class="t_title">当前处理人</div>
              <div
                v-if="tsobj.user_name"
                class="t_con"
                style="margin-left:30px"
              >{{ tsobj.user_name }}</div>
              <div v-else class="t_con" style="margin-left:30px">{{ user_name }}</div>
            </div>
          </div>
          <div class="flexc t_bottom">
            <div class="t_title" style="margin-left:28px">用户投诉内容</div>
            <div class="t_con" style="width: 1000px;">{{ tsobj.content }}</div>
          </div>
          <div class="flexc t_bottom">
            <div class="t_title" style="margin-left:28px">用户投诉图片</div>
            <img style="width: 200px;" @click="check_img(tsobj.img)" :src="tsobj.img" alt />
          </div>
          <div class="flexc t_bottom">
            <div class="t_title">订单信息</div>
            <div class="order_container">
              <div class="flexc t_order_bottom one_order">
                <div class="t_right">
                  订单ID：{{ orderobj.id }}
                  <i
                    @click="copy(orderobj.id)"
                    style="cursor: pointer;color: #409EFF;"
                    class="el-icon-document-copy"
                  ></i>
                </div>
                <div class="t_right">订单来源：{{ orderobj.source }}</div>
                <div @click="copy(orderobj.source_id)" class="t_right">
                  外部订单编号：{{orderobj.source_id}}
                  <i
                    style="cursor: pointer;color: #409EFF;"
                    class="el-icon-document-copy"
                  ></i>
                </div>
                <div class="t_right">平台创建时间：{{ orderobj.created_at }}</div>
              </div>
              <div class="flexc t_order_bottom">
                <div class="t_right">商品名称：{{ orderobj.product_sku }}</div>
                <div class="t_right" style="margin-left:3px">商品编码：{{ orderobj.source_sku }}</div>
                <div class="t_right">购买号码：{{ orderobj.plan_mobile }}</div>
                <div class="t_right">生产号码：{{ orderobj.plan_mobile_produced }}</div>
              </div>
              <div class="flexc dsp_order_bottom">
                <div style="display: flex;margin-top: 20px;">
                  <div class="t_right">证件姓名：{{ orderobj.id_card_name }}</div>
                  <div class="t_right" style="margin-left:3px">收件人：{{ orderobj.address_name }}</div>
                  <div class="t_right" style="margin-left:12px">证件号码：{{ orderobj.id_card_num }}</div>
                </div>
                <div style="display: flex;margin: 20px 0;">
                  <div class="t_right">联系电话：{{ orderobj.address_mobile }}</div>
                  <div
                    class="t_right"
                    style="margin-left:3px"
                  >收货地址：{{ orderobj.address_province }}{{ orderobj.address_city }}{{ orderobj.address_district }}{{ orderobj.address }}</div>
                </div>
              </div>
              <div class="flexc t_order_bottom">
                <div class="t_right">订单状态：{{ orderobj.status_name }}</div>
                <div class="t_right" style="margin-left:3px">激活状态：{{ orderobj.active_status_name }}</div>
                <div class="t_right">退款状态：{{ orderobj.refund_status_name }}</div>
              </div>
              <div class="flexc d_order_bottom">
                <div class="t_right">物流公司：{{ orderobj.company }}</div>
                <div class="t_right" style="margin-left:3px">物流单号：{{ orderobj.tracking_number }}</div>
              </div>
            </div>
          </div>
          <div class="flexc t_bottom">
            <div class="t_title" style="margin-left:28px">处理结果</div>
            <el-input
              style="width: 600px;"
              type="textarea"
              :rows="2"
              placeholder="请输入处理结果"
              v-model="result"
            ></el-input>
          </div>
        </div>
        <div style="display: flex;justify-content: center;margin-top: 20px;">
          <el-button @click="over(1)" style=" border-radius: 10px;">关闭</el-button>

          <el-button
            @click="over(3)"
            type="primary"
            style=" border-radius: 10px;background:#3158F1;border:none"
          >已联系未完成</el-button>

          <el-button
            @click="over(2)"
            type="primary"
            style=" border-radius: 10px;background:#3158F1;border:none"
          >处理完成</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="查看图片" :visible.sync="isshowimg" width="500px">
      <img :src="imgurl" alt />
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import top from "./components/top.vue";
import left from "./components/left.vue";
import moment from "moment";
export default {
  components: {
    top,
    left
  },
  name: "tousu",
  data() {
    return {
      isshowimg: false,
      imgurl: "",
      result: "",
      tsobj: {},
      orderobj: {},
      user_name: ""
    };
  },
  created() {
    axios.get(`${this.apis}/api/account/shop/info`).then(response => {
      if (response.data.msg.code == 0) {
        console.log("账号信息");
        console.log(response);
        this.user_name = response.data.data.user_name;
      } else {
        this.$message.error(response.data.msg.info);
      }
    });
  },
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      axios
        .get(
          `${this.apis}/api/mini/order/complain/info?id=${this.$route.query.id}`
        )
        .then(response => {
          if (response.data.msg.code == 0) {
            this.tsobj = response.data.data;
            if(response.data.data.order == null || response.data.data.order == ''){
              this.orderobj = {}
            }else{
              this.orderobj = response.data.data.order;
            }
            if(response.data.data.result == null || response.data.data.result == ''){
              this.orderobj = {}
            }else{
              this.result = response.data.data.result;
            }


          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    goBack() {
      this.$router.push({
        path: "/zhiboxitong/tousu"
      });
    },
    copy: function(t) {
      var that = this;
      this.$copyText(t).then(res => {
        that.$message.success("复制成功");
      });
    },
    over(type) {
      if (type == 1) {
        //直接关闭
        this.$router.push({
          path: "/zhiboxitong/tousu"
        });
      }
      //修改状态
      if (type == 2) {
        axios
          .post(`${this.apis}/api/mini/order/complain/set`, {
            id: this.$route.query.id,
            status: 1,
            result: this.result
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              //直接关闭
              this.$router.push({
                path: "/zhiboxitong/tousu"
              });
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }
      if (type == 3) {
        axios
          .post(`${this.apis}/api/mini/order/complain/set`, {
            id: this.$route.query.id,
            status: 2,
            result: this.result
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              //直接关闭
              this.$router.push({
                path: "/zhiboxitong/tousu"
              });
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      }

    },
    check_img(url) {
      this.imgurl = url;
      this.isshowimg = true;
    }
  }
};
</script>
<style scoped>
/deep/ .el-dialog__title {
  font-size: 20px;
  font-weight: bold; /* 修改标题字体大小 */
}
/deep/ .el-dialog {
  border-radius: 20px;
}
.t_title {
  margin-right: 15px;
  color: #333333;
  text-align: right;
  width: 100px;
}
.t_con {
  color: #666666;
}

.flexc {
  align-items: flex-start;
}
.t_bottom {
  margin-bottom: 30px;
}
.t_right {
  margin-right: 120px;
  color: #666666;
}
.d_order_bottom {
  width: 100%;
  height: 60px;
  line-height: 60px;
  margin-top: 10px;
}
.t_order_bottom {
  width: 100%;
  height: 80px;
  border-bottom: 2px solid #f8f9fd;
  line-height: 80px;
  margin-top: 10px;
}
</style>
<style scoped lang="less" >
.shoukuanpeizhi {
  // background: ;
  min-height: 100vh;
  * {
    box-sizing: border-box;
  }
  .zhiboxitong_content {
    height: calc(100vh - 70px);
    .left {
      width: 210px;
      background: #fafafe;
      height: 100%;
    }
    .right {
      padding: 15px 0 15px 15px;
      width: calc(100vw - 220px);
      height: 100vh;
      overflow: auto;
      .zhiboxitong_right {
        height: calc(100vh - 160px);
        background: #f8f9fd;
        border-radius: 5px;
        padding: 20px;
        border-top-left-radius: 30px;
        overflow: auto;
      }
    }
  }

  .order_container {
    width: 1416px;
    margin-left: 30px;
    height: 464px;
    border-radius: 12px;
    padding: 0 30px;
    background: white;
    .one_order {
      display: flex;
      // justify-content:flex-start;
    }
    .dsp_order_bottom {
      display: flex;
      flex-direction: column;
      height: 110px;
      border-bottom: 2px solid #f8f9fd;
    }
  }
}
</style>
